<template>
  <div class="header-box" v-if="bgColor !== '#fff'" :style="{background: bgColor, border: 'none'}">
        <van-icon name="arrow-left" size="24" @click="goBack" />
        <div class="header-item">{{ title }}</div>
        <div class="header-item"></div>
    </div>
  <van-nav-bar v-else
    :title="title"
    fixed
    placeholder
    :left-arrow="showLeftIcon"
    @click-right="handleRightIcon"
    @click-left="goBack"
    z-index="999"
  >
    <template #right>
      <slot name="rightContent" />
    </template>
  </van-nav-bar>
</template>

<script>
export default {
  name: "HeaderComp",
  props: {
    bgColor: {
      type: String,
      default: '#fff'
    },
    title: {
      type: String,
    },
    isBackApp: {
      type: Boolean,
      default: false
    },
    // 左侧箭头是否展示
    showLeftIcon: {
      type: Boolean,
      default: true,
    },
    // 左侧箭头点击事件
    leftIconCallback: {
      type: Function,
    },
    // 右侧箭头点击事件
    rightIconCallback: {
      type: Function,
    },
  },
  data() {
    return {};
  },
  methods: {
    goBack() {
      if(this.isBackApp) {
        document.title = "返回APP"
        return
      }
      if (this.leftIconCallback && typeof this.leftIconCallback == "function") {
        this.leftIconCallback();
      } else {
        // this.$router.go(-1);
        console.log(history.length);
        const hasBackRoute = history.length > 1;
        hasBackRoute ? this.$router.go(-1) : (document.title = "返回APP");
      }
    },
    handleRightIcon() {
      if (
        this.rightIconCallback &&
        typeof this.rightIconCallback == "function"
      ) {
        this.rightIconCallback();
      }
    },
  },
};
</script>
<style scoped lang="less">
.header-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 32px;
  border-bottom: 1px solid #d7d7d7;
  font-size: 36px;
  background: #fff;
  .header-item {
    font-weight: 500;
    color: #131313;
  }
}
</style>
